<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reto #1</title>
    <style>
    </style>
</head>

<body>
    <div>
        <h1>Introduce una cadena de texto: </h1>
        <input type="text" id="cadenaTexto" pattern="^[A-Za-z]+$">
        <button id="botonTraducir" onclick="javascript:traducirTexto()">Traducir Cadena</button>
    </div>
    <div id="contenedor"></div>
    <script>
        const mapa = new Map();
        mapa.set("a", "4")
        mapa.set("b", "I3")
        mapa.set("c", "[")
        mapa.set("d", ")")
        mapa.set("e", "3")
        mapa.set("f", "|=")
        mapa.set("g", "&")
        mapa.set("h", "#")
        mapa.set("i", "1")
        mapa.set("j", ",_|")
        mapa.set("k", ">|")
        mapa.set("l", "£")
        mapa.set("m", "^^")
        mapa.set("n", "^")
        mapa.set("o", "0")
        mapa.set("p", "?")
        mapa.set("q", "9")
        mapa.set("r", "I2")
        mapa.set("s", "5")
        mapa.set("t", "7")
        mapa.set("u", "v")
        mapa.set("v", "|/")
        mapa.set("w", "VV")
        mapa.set("x", "}{")
        mapa.set("y", "j")
        mapa.set("z", "2")

        function traducirTexto() {
            texto = document.getElementById("cadenaTexto");
            if (!texto.checkValidity()) {
                alert('El campo no es válido. Revisa los caracteres introducidos.');

            } else {
                nuevaFrase = "";
                frase = texto.value.toLowerCase();
                for (let i = 0; i < texto.value.length; i++) {
                    nuevaFrase += (mapa.get(frase[i]));
                }
                document.getElementById("contenedor").innerHTML = "<h1>La frase traducida es: " + nuevaFrase +"</h1>";
            }
        }
    </script>
</body>

</html>